import { useState, useTransition } from "react";

/**
 * useTransition
 */
export default function UseTransition() {
  // 在组件的顶层调用useTransition，将某些状态变更标记为transition
  // isPendding 表示是都有
  const [isPending, startTransition] = useTransition();
  const [input, setInput] = useState("");
  const [list, setList] = useState([]);
  const handleInput = (e) => {
    setInput(e.target.value);

    startTransition(() => {
      const newList = [];
      for (let i = 0; i < 2000; i++) {
        newList.push(e.target.value);
      }
      setTimeout(() => {
        setList(newList);
      }, 1000);
    });
  };
  return (
    <div>
      <h2>useTransition</h2>
      <input type='text' value={input} onChange={handleInput} />
      {isPending ? <p>Loading...</p> : null}
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}
